import React from 'react'
import { Form, Icon, Input, Button } from 'antd';
const FormItem = Form.Item;

class SearchForm extends React.Component {

  componentDidMount() {

  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const filters = [];
        for(let key in values){
          if(values[key]){
            const json = {"name":key,"val":`%${values[key]}%`,"op":"like"}
            filters.push(json)
          }
        }
        this.handleUpdate(filters);
      }
    });
  }
  handleUpdate =(values)=>{
    this.props.search(values);
  }
  handleReset = () => {
      this.props.form.resetFields();
      this.props.clean()
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form layout="inline" onSubmit={this.handleSubmit}>
        <FormItem>
          {getFieldDecorator('username')(
            <Input  placeholder="用户名称" style={{width:'100px'}} />
          )}
        </FormItem>
        <FormItem>
        {getFieldDecorator('real_name')(
          <Input  placeholder="真实姓名" style={{width:'100px'}} />
        )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('email')(
            <Input  placeholder="邮箱" style={{width:'130px'}} />
          )}
        </FormItem>
        <FormItem>
          <Button htmlType="submit">
            查询
          </Button>
        </FormItem>
        <FormItem>
          <Button htmlType="button" onClick={this.handleReset}>
            X
          </Button>
        </FormItem>
      </Form>
    );
  }
}


export default Form.create()(SearchForm)
